{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 活动聚</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html, body{
        background: linear-gradient(135deg, #d2f1dc 0%, #93c88b 100%);
        margin: 0;
        padding: 0;
        height: 100%; /* 添加高度设置 */
        overflow-x: hidden; /* 防止水平滚动 */
    }
    body::before, body::after {
        content: '';
        position: fixed; /* 改为固定定位 */
        z-index: 0;
    }

    body::before {
        /* 左上角的完整圆形 */
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        top: -150px;
        left: -150px;
        animation: float 15s infinite ease-in-out;
    }

    body::after {
        /* 右下角的扇形，固定在页面底部 */
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 100% 0 0 0; /* 只显示左下角四分之一 */
        bottom: 0; /* 紧贴底部 */
        right: 0; /* 紧贴右侧 */
        animation: float 20s infinite ease-in-out 2s;
    }

    /* 确保主体内容可以滚动，但背景固定 */
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(135deg, #d2f1dc 0%, #93c88b 100%);
        overflow-y: auto; /* 允许垂直滚动 */
        min-height: 100vh; /* 确保至少占满屏幕高度 */
        margin: 0;
        padding: 20px;
        width: 100%;
    }

    .home-btn {
        position: fixed;
        top: 30px;
        left: 30px;
        width: 50px;
        height: 50px;
        background: #008F32;
        color: #ffffff;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 20px;
        text-decoration: none;
        z-index: 1000;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .home-btn:hover {
        background: #006624;
        transform: scale(1.1) rotate(10deg);
    }

    .register-container {
        width: 100%;
        max-width: 420px;
        padding: 20px;
        position: relative;
        z-index: 10;
        margin: auto; /* 确保居中 */
    }

    .register-card {
        padding: 60px 40px;
        border-radius: 12px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
        transform-style: preserve-3d;
        transition: all 0.1s ease-out;
        position: relative;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.7);
    }

    /* 添加3D效果增强 */
    .register-card::after {
        content: '';
        position: absolute;
        inset: -10px;
        background: inherit;
        border-radius: 16px;
        z-index: -1;
        filter: blur(10px);
        opacity: 0.7;
        transform: translateZ(-1px);
    }

    .register-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(90deg, #008F32, #99DBB1);
    }

    .register-header {
        text-align: center;
        margin-bottom: 40px;
        position: relative;
    }

    .register-header h1 {
        font-size: 32px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
        letter-spacing: -1px;
        position: relative;
        display: inline-block;
    }

    .register-header h1::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        background: #008F32;
        border-radius: 3px;
        transition: width 0.3s;
    }

    .register-card:hover .register-header h1::after {
        width: 60px;
    }

    .register-header p {
        font-size: 14px;
        color: #666666;
        font-weight: 400;
        opacity: 0.8;
    }

    .register-body {
        margin-bottom: 30px;
    }

    .form-group {
        margin-bottom: 25px;
        position: relative;
    }

    .form-label {
        position: static !important;
        display: block;
        font-weight: 600;
        color: #333 !important;
        margin-bottom: 10px;
        transform: none !important;
        opacity: 1 !important;
        top: auto !important;
        left: auto !important;
        font-size: 13px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .form-control {
        width: 100%;
        border: none;
        border-bottom: 2px solid #ddd;
        padding: 12px 0;
        font-size: 16px;
        transition: all 0.3s;
        background: transparent;
        color: #333;
        position: relative;
        z-index: 1;
    }

    .form-control:focus {
        outline: none;
        border-bottom-color: #008F32;
    }

    .form-control:focus + .input-underline {
        transform: scaleX(1);
    }

    .input-underline {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #008F32;
        transform: scaleX(0);
        transition: transform 0.3s ease;
        transform-origin: left center;
    }

    .form-control::placeholder {
        color: #ccc;
        transition: all 0.3s;
    }

    .form-control:focus::placeholder {
        color: #999;
        transform: translateY(-10px);
        font-size: 12px;
    }

    .btn-register {
        background: #008F32;
        color: #ffffff;
        border: none;
        padding: 16px;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        transition: all 0.3s;
        cursor: pointer;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }

    .btn-register::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: all 0.6s;
    }

    .btn-register:hover {
        background: #006624;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 143, 50, 0.3);
    }

    .btn-register:hover::before {
        left: 100%;
    }

    .btn-register:active {
        transform: translateY(0);
    }

    .input-group {
        display: flex;
        gap: 15px;
        align-items: flex-end;
    }

    .input-group .form-control {
        flex: 1;
    }

    .btn-send-code {
        background: transparent;
        color: #008F32;
        border: 2px solid #008F32;
        padding: 12px 20px;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-radius: 4px;
    }

    .btn-send-code:hover {
        background: #008F32;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .btn-send-code:disabled {
        background: transparent;
        color: #ccc;
        border-color: #ccc;
        cursor: not-allowed;
        transform: none;
    }

    .register-footer {
        text-align: center;
        padding-top: 30px;
        border-top: 1px solid #eeeeee;
        margin-top: 30px;
    }

    .register-footer a {
        color: #008F32;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.3s;
        letter-spacing: 0.5px;
        position: relative;
    }

    .register-footer a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: #008F32;
        transition: width 0.3s;
    }

    .register-footer a:hover {
        color: #006624;
    }

    .register-footer a:hover::after {
        width: 100%;
    }

    /* 动画效果 */
    @keyframes float {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-30px) rotate(5deg);
        }
    }

    /* 响应式调整 */
    @media (max-width: 576px) {
        .register-card {
            padding: 40px 20px;
        }

        .register-footer a {
            margin: 0 8px;
            font-size: 12px;
        }
    }
</style>
</head>
<body>

<a href="{% url 'home' %}" class="home-btn">
    <i class="bi bi-house-fill"></i>
</a>

<div class="register-container">
    <div class="register-card" id="registerCard">
        <div class="register-header">
            <h1>注册</h1>
            <p>加入活动聚社区</p>
        </div>

        <div class="register-body">
            <form method="post" id="registerForm">
                {% csrf_token %}

                <div class="form-group">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                    <div class="input-underline"></div>
                </div>

                <div class="form-group">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱地址" required>
                    <div class="input-underline"></div>
                </div>

                <div class="form-group">
                    <label for="verify_code" class="form-label">验证码</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="verify_code" name="verify_code"
                               placeholder="6位验证码" maxlength="6" required>
                        <div class="input-underline"></div>
                        <button type="button" class="btn-send-code" id="sendCodeBtn" onclick="sendVerifyCode()">
                            发送
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="phone" class="form-label">手机号 (选填)</label>
                    <input type="tel" class="form-control" id="phone" name="phone" placeholder="请输入手机号">
                    <div class="input-underline"></div>
                </div>

                <div class="form-group">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                    <div class="input-underline"></div>
                </div>

                <div class="form-group">
                    <label for="password_confirm" class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="password_confirm" name="password_confirm" placeholder="请再次输入密码" required>
                    <div class="input-underline"></div>
                </div>

                <button type="submit" class="btn-register">注册</button>
            </form>
        </div>

        <div class="register-footer">
            <p class="mb-0">
                已有账号？<a href="{% url 'users:login' %}">立即登录</a>
            </p>
        </div>
    </div>
</div>

<script>
// 鼠标跟踪效果实现
document.addEventListener('DOMContentLoaded', () => {
    const registerCard = document.getElementById('registerCard');
    const body = document.body;

    // 获取视口中心作为参考点
    const getCenter = () => {
        return {
            x: window.innerWidth / 2,
            y: window.innerHeight / 2
        };
    };

    // 初始状态
    let center = getCenter();

    // 鼠标移动时更新卡片旋转角度
    body.addEventListener('mousemove', (e) => {
        // 计算鼠标与中心的偏移量 (范围: -1 到 1)
        const xOffset = (e.clientX - center.x) / center.x;
        const yOffset = (e.clientY - center.y) / center.y;

        // 设置最大旋转角度
        const maxRotateX = 5;  // 上下旋转角度
        const maxRotateY = 10;  // 左右旋转角度

        // 计算最终旋转角度
        const rotateX = yOffset * maxRotateX;
        const rotateY = -xOffset * maxRotateY;

        // 应用变换
        registerCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

        // 添加阴影跟随效果，增强立体感
        const shadowX = xOffset * 20;
        const shadowY = yOffset * 20;
        registerCard.style.boxShadow = `
            ${shadowX}px ${shadowY}px 30px rgba(0, 0, 0, 0.1),
            ${shadowX * 0.5}px ${shadowY * 0.5}px 15px rgba(0, 0, 0, 0.05)
        `;
    });

    // 窗口大小改变时重新计算中心
    window.addEventListener('resize', () => {
        center = getCenter();
    });

    // 页面加载动画
    registerCard.style.opacity = '0';
    registerCard.style.transform = 'perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(30px)';

    setTimeout(() => {
        registerCard.style.transition = 'all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
        registerCard.style.opacity = '1';
        registerCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
    }, 100);
});

// 验证码发送功能
let countdown = 0;
let timer = null;

function sendVerifyCode() {
    const email = document.getElementById('email').value.trim();
    const btn = document.getElementById('sendCodeBtn');

    if (!email) {
        alert('请输入邮箱地址');
        return;
    }

    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        alert('请输入有效的邮箱地址');
        return;
    }

    btn.disabled = true;
    btn.textContent = '发送中...';

    fetch("{% url 'users:send_verify_code' %}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: `email=${encodeURIComponent(email)}&type=register`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('验证码已发送到您的邮箱，请查收');
            startCountdown();
        } else {
            alert(data.msg || '发送失败，请重试');
            btn.disabled = false;
            btn.textContent = '发送验证码';
        }
    })
    .catch(error => {
        alert('网络错误，请稍后重试');
        btn.disabled = false;
        btn.textContent = '发送验证码';
    });
}

function startCountdown() {
    countdown = 60;
    const btn = document.getElementById('sendCodeBtn');

    timer = setInterval(() => {
        countdown--;
        btn.textContent = `${countdown}秒后重发`;

        if (countdown <= 0) {
            clearInterval(timer);
            btn.disabled = false;
            btn.textContent = '发送验证码';
        }
    }, 1000);
}
</script>

</body>
</html>